<template>
  <van-nav-bar title="系统消息" left-arrow @click-left="router.back()" />

  <div class="system-list">
    <div class="system-card" @click="goToDetail">
      <div class="system-title-row">
        <span class="system-title">评分提醒</span>
        <van-icon name="arrow" color="#c8c9cc" size="18" />
      </div>
      <div class="system-desc">诚邀您对系统使用进行评分</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
const router = useRouter()

function goToDetail() {
  // 跳转到评分详情页，可根据实际需求调整
  router.push('/system-score-detail')
}
</script>

<style scoped>
.system-list {
  background: #f7f8fa;
  min-height: 100vh;
  padding: 16px 0;
}
.system-card {
  background: #fff;
  border-radius: 14px;
  margin: 0 12px;
  padding: 18px 18px 12px 18px;
  box-shadow: 0 2px 8px 0 rgba(0,0,0,0.02);
  cursor: pointer;
}
.system-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.system-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
}
.system-desc {
  font-size: 13px;
  color: #bcbcbc;
  margin-top: 6px;
}
</style>